import Sortable from "sortablejs";
import { computed, nextTick, onMounted, ref, watch } from "vue";
import { useHandleData } from "@/hooks/useHandleData";
import { PostShenQingDanDel, PutShenQingDanTiaoZhengShunXu } from "@/api/modules/integratedProject";
import { useIntegratedProject } from "@/stores/modules/integratedProject";
import mittBus from "@/utils/mittBus";
import { DCaret } from "@element-plus/icons-vue";
// import { DCaret } from "@element-plus/icons-vue";

export function useColumns() {
  onMounted(() => {
    rowDrop();
  });
  const tableData = ref<any>([]);
  const rowDrop = () => {
    nextTick(() => {
      const wrapper: HTMLElement | any = document.querySelector(".left-project .el-table__body-wrapper tbody");
      Sortable.create(wrapper, {
        animation: 300,
        // handle: ".drag-btn",
        handle: ".move",
        onEnd: ({ newIndex, oldIndex }) => {
          const [removedItem]: any = tableData.value.splice(oldIndex!, 1);
          tableData.value.splice(newIndex!, 0, removedItem);
          console.log(newIndex, oldIndex, removedItem);
          // console.log(tableData.value);
          PutShenQingDanTiaoZhengShunXu(removedItem.ShunXu, newIndex, removedItem.ShenQingDanID).then((res: any) => {
            console.log(res);
            getTableData();
          });
        }
      });
    });
  };

  const columns: any = [
    {
      label: "排序",
      // type: "index",
      width: "70",
      cellRenderer: () => (
        <el-tag class="move">
          <el-icon>
            <DCaret />
          </el-icon>
        </el-tag>
      )
    },
    {
      label: "序号",
      type: "index",
      width: "70"
    },
    {
      label: "申请单名称",
      prop: "ShenQingDanMingCheng",
      width: "120"
    },
    {
      label: "检验性质",
      prop: "JianYanXingZhi",
      width: "120"
    },
    {
      label: "执行组",
      prop: "ZhiXingZu"
    },
    {
      label: "试管类型",
      prop: "ShiGuanLeiXing",
      width: "120"
    },
    {
      label: "打印次数",
      prop: "DaYinCiShu",
      width: "120"
    },
    {
      label: "提示信息",
      prop: "TiShiXinXi",
      width: "120"
    },
    {
      label: "正常描述",
      prop: "ZhengChangMiaoShu",
      width: "120"
    },
    {
      label: "默认检查者",
      prop: "MoRenJianChaZhe",
      width: "130"
    },
    {
      label: "默认审核者",
      prop: "MoRenShenHeZhe",
      width: "130"
    },
    {
      label: "所属院区",
      prop: "SuoShuYuanQu",
      width: "120"
    },
    {
      label: "申请单ID",
      prop: "ShenQingDanID"
    },
    {
      label: "执行科室名称",
      prop: "ZhiXingKeShiMingCheng",
      width: "150"
    },
    {
      label: "设备标识",
      prop: "SheBeiBiaoShi",
      width: "120"
    },
    {
      label: "检查部位",
      prop: "JianChaBuWei",
      width: "120"
    },
    {
      label: "检查类别",
      prop: "JianChaLeiBie",
      width: "120"
    },
    {
      label: "备注1",
      prop: "BeiZhu1"
    },
    {
      label: "备注2",
      prop: "BeiZhu2"
    },
    {
      label: "备注3",
      prop: "BeiZhu3"
    },
    {
      label: "操作",
      fixed: "right",
      width: "100",
      slot: "caoZuo"
    }
  ];
  const tableRef = ref();

  const deleteAccount = async (row: Partial<any> = {}) => {
    await useHandleData(PostShenQingDanDel, row.ShenQingDanID, `删除【${row.ShenQingDanMingCheng}】`);
    await getTableData();
    // 删除的时候，说明这个的下边已经是没有组合项目等其他了，所以不需要再查询一下搜索的组合项目接口了
    // await useIntegratedProject().getJianSuoZuHeXiangMuSel();
    useIntegratedProject().clearShenQingDanID();
  };
  const dialogRef = ref();
  // 打开新增弹窗
  const onOpenAddRole = (type: string) => {
    dialogRef.value.openDialog(type);
  };
  // 打开修改角色弹窗
  const onOpenEditRole = (type: string, row: Object) => {
    dialogRef.value.openDialog(type, row);
  };
  // 初始化表格
  const getTableData = () => {
    useIntegratedProject().setKeShiId(useIntegratedProject().keShiId);
  };
  const newShenQingDanOption = computed(() => {
    return useIntegratedProject().shenQingDanOption;
  });
  watch(newShenQingDanOption, () => {
    tableData.value = [...newShenQingDanOption.value] as any;
  });
  // 每一行的点击事件
  const tableDataClick = data => {
    // console.log(data.ShenQingDanID);
    // 默认是根据表格的第一项请求数据
    useIntegratedProject().setShenQingDanID(data.ShenQingDanID);
    useIntegratedProject().getZuHeXiangMuSel();
    //   最右侧的数据清除
    useIntegratedProject().clearBaoHanMingXiOption();
    useIntegratedProject().clearBaoHanZuHeOption();
    // tag的点击是否有数据
    useIntegratedProject().setTagRightData(false);

    // 清除中间的组合项目的 id
    useIntegratedProject().clearZuHeXiangMuID();
  };
  mittBus.on("shenQingDanBg", function (data: any) {
    tableData.value.map((item: any, index: any) => {
      if (item.ShenQingDanID === data.ShenQingDanID) {
        setCurrent(index, tableData.value[index]);
      }
    });
  });
  const setCurrent = (index: any, row?: any) => {
    const { setCurrentRow, scrollTo } = tableRef.value.getTableRef();
    setCurrentRow(row);
    const targetRow: any = document.querySelector(
      `.left-project .el-table__body-wrapper tbody tr:nth-child(${index + 1})`
    ) as HTMLElement;
    const offsetHeight = targetRow?.offsetHeight;
    nextTick(() => {
      scrollTo({ top: index * offsetHeight });
    });
  };

  return {
    columns,
    tableData,
    deleteAccount,
    onOpenAddRole,
    onOpenEditRole,
    getTableData,
    tableDataClick,
    tableRef,
    dialogRef
  };
}
